<template>
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm1" label-width="100px">
            <el-form-item label="岗位名称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入岗位名称" ></el-input>
            </el-form-item>
            <el-form-item label="岗位编码" prop="coding">
                <el-input v-model="ruleForm.coding" placeholder="请输入编码名称" ></el-input>
            </el-form-item>
            <el-form-item label="岗位顺序"  prop="sort">
                <el-input-number v-model="ruleForm.sort" controls-position="right" :min="0" :max="10"></el-input-number>
            </el-form-item>
            <el-form-item label="岗位状态">
                <el-radio v-model="ruleForm.state" label="1">正常</el-radio>
                <el-radio v-model="ruleForm.state" label="2">停用</el-radio>
            </el-form-item>
            <el-form-item label="岗位备注">
                <el-input type="textarea" v-model="ruleForm.desc" placeholder="请输入内容" ></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm('ruleForm1')">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
    </el-dialog>
</template>

<script>
    export default {
        name: "PostAction",
        data(){
            return {
                title: '新增岗位',
                ruleForm: {
                    number: '',
                    name: '',
                    coding:'',
                    desc: '',
                    sort: 0,
                    state: '1',
                    CreationTime: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入岗位名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    coding: [
                        { required: true, message: '请输入岗位编号', trigger: 'blur' },
                    ],
                    sort: [
                        { required: true, message: '请输入岗位顺序', trigger: 'blur' },
                    ],
                    desc: [
                        { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ]
                },
                dialogVisible: false,
            }
        },
        methods: {
            // 提交修改
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$emit('getData', this.ruleForm)
                        this.dialogVisible = false
                    }
                })
            },
            // 打开弹框
            init(row) {
                this.dialogVisible = true
                this.title = row ? '修改岗位' : '新增岗位'
                this.$nextTick(() => {
                    this.$refs.ruleForm1.resetFields()
                    if (row) this.ruleForm = JSON.parse(JSON.stringify(row))
                })
            }
        }
    }
</script>
